<template>
  <div id="app">
    <h1>---App相关信息---</h1>
    <h2>{{message}}</h2>

    <h2>--mudule相关--</h2>
    <!-- 不需要state.a.state -->
    <h3>{{$store.state.a.name}}</h3>
    <button @click="updateName">修改名称</button>
    <!-- <h3>{{$store.getters.fullName}}</h3>
    <h3>{{$store.getters.fullName2}}</h3>
    <h3>{{$store.getters.fullName3}}</h3> -->
    <button @click="asyncUpdateName">异步修改名称</button>

    <h2>--App: info对象的内容是否是响应式的--</h2>
    <h3>{{$store.state.info}}</h3>
    <button @click="updateInfo">修改信息</button>
  
    <h1>--mutation相关--</h1>
    <h3>{{$store.state.counter}}</h3>
    <button @click="addition">button inc</button>
    <button @click="subtraction">button dec</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <button @click="addStudent">添加学生</button>
    <!-- <h1>--getter相关--</h1> -->
    <!-- <h3>{{$store.getters.powerCounter}}</h3>
    <h3>{{$store.getters.beyond20}}</h3>
    <h3>{{$store.getters.beyond20Len}}</h3> -->
    <!-- <h3>{{$store.getters.beyondXStu(18)}}</h3> -->

    <hello-vuex></hello-vuex>
  </div>
</template>

<script>
import HelloVuex from "./components/HelloVuex";
import {
  INCREMENT
  } from "./store/mutations-types";

export default {
  name: 'App',
  data() {
    return{
      message: 'App components',
    }
  },
  components: {
    HelloVuex
  },
  methods: {
    addition() {
      this.$store.commit(INCREMENT);
    },
    subtraction() {
      this.$store.commit('decrement');
    },
    addCount(count) {
      // payload负载写法
      // 普通提交风格
      // this.$store.commit('incrementCount', count);

      // 特殊提交风格
      this.$store.commit({
        // type是对应方法类型
        type: 'incrementCountSpecial',
        // 会传递对象
        // "count: count" / "count"
        count
      });

    },
    addStudent() {
      const student = {id: 114, name: 'zhongrui', age: 19};
      this.$store.commit('addStudent', student);
    },
    updateInfo(state) {
      // this.$store.commit('updateInfo');

      // 执行异步操作(action)时，使用dispatch
      // this.$store.dispatch('aUpdateInfo', {
      //   message: 'infomation',
      //   success: () => {
      //     console.log("succeed");
      //   }
      // });

      this.$store.dispatch('aUpdateInfo', 'information').then(res => {
        console.log(res);
      });
    },
    updateName() {
      this.$store.commit('updateName', 'xinmeng');
    },
    asyncUpdateName() {
      this.$store.dispatch('aUpdateName');
    }
  },
  computed: {
    // beyond20() {
    //   return this.$store.state.students.filter(
    //     item => item.age>=20
    //     );
    // }
  }
}
</script>

<style>

</style>
